<template>
  <Modal width="45" :value.sync="visible" :title="title" @on-cancel='rightClose'>
    <Form ref="DBForm" :model="DBForm" :rules="ruleDBForm" :label-width="100">
      <FormItem label="名称" prop="name">
        <Input v-model="DBForm.name" placeholder="请输入" />
      </FormItem>
      <FormItem label="所属环境" prop="env_id">
        <Select v-model="DBForm.env_id">
          <Option v-for="item in envList" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
      </FormItem>
      <FormItem label="数据库类型" prop="database_type">
        <Select v-model="DBForm.database_type">
          <Option v-for="item in dbList" :value="item.name" :key="item.name">{{ item.name }}</Option>
        </Select>
      </FormItem>
      <FormItem label="连接地址" prop="address">
        <Input v-model="DBForm.address" placeholder="格式：域名(或IP):端口号，示例：https://www.baidu.com" />
      </FormItem>
      <FormItem label="用户名" prop="username">
        <Input v-model="DBForm.username" placeholder="请输入" />
      </FormItem>
      <FormItem label="密码" prop="password">
        <Input v-model="DBForm.password" placeholder="请输入" />
      </FormItem>
      <FormItem label="备注" prop="remark">
        <Input v-model="DBForm.remark" type="textarea" :rows="4" placeholder="请输入" />
      </FormItem>
    </Form>
    <div slot="footer">
      <Button @click="cancel">取消</Button>
      <Button type="primary" @click="ok">确定</Button>
    </div>
  </Modal>
</template>

<script>

import {AddDataBase, DataBaseDetail, DataBaseEdit, envs} from "@/utils/api";

const dbList = [
  {
    name: "MySql"
  },
  {
    name: "Redis"
  },
  {
    name: "MongoDB"
  },
  {
    name: "PostGresql"
  }
]
export default {
  name: "db_form",
  props: {
    visible: Boolean,
    title: String,
    Id: Number,
    Edit: Boolean
  },
  watch: {
    visible:{
      handler(v){
        if (v){
          this.getEnvList();
        }
      }
    },
    Edit: {
      handler(v){
        if (v){
          this.getDetail(this.Id)
        }
      }
    }
  },
  data() {
    return {
      dbList,
      DBForm: {
        name: "",
        database_type: "",
        address: "",
        username: "",
        password: "",
        remark:"",
        env_id: 0
      },
      envList: [],
      ruleDBForm: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        env_id: [
          { required: true,type: 'number', message: '环境不能为空', trigger: 'blur' }
        ],
        database_type: [
          { required: true, message: '数据库类型不能为空', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '地址必填', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '用户名必填', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    ok () {
      this.$refs['DBForm'].validate((valid) => {
        if (valid) {
          const obj = {
              ...this.DBForm,
              project_id: parseInt(localStorage.getItem("project_id"))
            }
          if (!this.Edit){
            AddDataBase(obj).then(res=>{
              if (res.data.errno !== 0) {
                this.$Message.error(res.data.errmsg)
                return
              }
              this.$Message.success(res.data.data)
              this.cancel()
            })
          }else {
            DataBaseEdit(obj).then(res=> {
              if (res.data.errno !== 0) {
                this.$Message.error(res.data.errmsg)
                return
              }
              this.$Message.success(res.data.data)
              this.cancel()
            })
          }
        }else {
          this.visible = true
        }
      })
    },
    cancel () {
      this.$refs['DBForm'].resetFields();
      this.$emit("close", false);
    },
    rightClose(){
      this.cancel()
    },
    getEnvList(){
      const obj = {
        project_id: parseInt(localStorage.getItem("project_id"))
      }
      envs(obj).then(res=>{
        this.envList = res.data.data;
      })
    },
    getDetail(id){
      DataBaseDetail({id:id}).then(res=>{
        this.DBForm = res.data.data
      })
    }
  }
}
</script>

<style scoped>

</style>
